import './style/global.less'
import { AliveScope } from 'react-activation'

import { createRoot } from 'react-dom/client'
import { useEffect } from 'react'
import { ConfigProvider } from '@arco-design/web-react'
import zhCN from '@arco-design/web-react/es/locale/zh-CN'
import enUS from '@arco-design/web-react/es/locale/en-US'
import { GlobalContext } from '@/utils/context.ts'
// redux toolkit
import { Provider } from 'react-redux'
import store from '@/store/index.ts'
import App from './App'
import useStorage from './hooks/useStorage'
import changeTheme from './utils/changeTheme'
import './mock'
function Index() {
  const [lang, setLang] = useStorage('arco-lang', 'zh-CN')
  const [theme, setTheme] = useStorage('arco-theme', 'light')
  function getArcoLocale() {
    switch (lang) {
      case 'zh-CN':
        return zhCN
      case 'en-US':
        return enUS
      default:
        return zhCN
    }
  }
  const contextValue = {
    lang,
    setLang,
    theme,
    setTheme
  }
  useEffect(() => {
    changeTheme(theme!)
  }, [theme])
  return (
    <Provider store={store}>
      <GlobalContext.Provider value={contextValue}>
        <ConfigProvider locale={getArcoLocale()}>
          <AliveScope>
            <App />
          </AliveScope>
        </ConfigProvider>
      </GlobalContext.Provider>
    </Provider>
  )
}
const container = document.getElementById('root')!
const root = createRoot(container)
root.render(<Index />)
